import React, { Component } from 'react'

import { Route, Link, withRouter, Switch } from 'react-router-dom'

import { TransitionGroup, CSSTransition } from 'react-transition-group'
// css动画库
import './assets/animate.min.css'

import Child1 from './views/Child1'
import Child2 from './views/Child2'

// 装饰器
@withRouter
class App extends Component {

  render() {
    return (
      <>
        <li><Link to="/child1">Child1页面</Link></li>
        <li><Link to="/child2">Child2页面</Link></li>
        <hr />
        <TransitionGroup>
          <CSSTransition
            timeout={600}
            classNames={{
              enter:'animate__animated',
              exit:'animate__animated',
              enterActive:'animate__fadeIn',
              exitActive:'animate__fadeOut'
            }}
            unmountOnExit
            // key告诉当前组件变化了 触发动画
            key={this.props.location.key}
          >
            <Switch location={this.props.location}>
              <Route path="/child1" component={Child1} />
              <Route path="/child2" component={Child2} />
            </Switch>
          </CSSTransition>
        </TransitionGroup>

      </>
    )
  }

}

export default App
